<template>
  <div>
    <input type="text" placeholder="请输入要搜索的地点" v-model="wheretovalue">
    <input value="搜索" type="button" @click="search()">
  </div>
<div class="div1">
  <div id="container"></div>
</div>
</template>
<script>

export default {
  name: "guide",
  data() {
    return {
      wheretovalue: ''
    }
  },
  methods:{
    search(){
      //搜索
      // 百度地图API功能
      var map = new BMapGL.Map("container");
      map.centerAndZoom(new BMapGL.Point(111.663,33.75186), 11);
      var local = new BMapGL.LocalSearch(map, {
        renderOptions:{map: map}
      });
      local.search(this.wheretovalue);

      }
  },
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  mounted() {
    //页面加载就调用
    var map = new BMapGL.Map('container'); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(111.663,33.75186), 14); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

  }

}
</script>

<style scoped>
.div1,
#container {
  overflow: hidden;
  width: 100%;
  height: 30rem;
  margin: 0;
  font-family: "微软雅黑";
}
.info {
  z-index: 999;
  width: auto;
  min-width: 22rem;
  padding: .75rem 1.25rem;
  margin-left: 1.25rem;
  position: fixed;
  top: 1rem;
  background-color: #fff;
  border-radius: .25rem;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}
</style>